<template>
  <div>
    <x-header title="订单详情" style="background-color: #33bb99;width:100%;position: fixed;top:0;z-index: 99;">
      <span slot="overwrite-left" @click="back" class="iconfont icon-shangyiyedanjiantou" style="color: #fff;font-size: 22px;"></span>
    </x-header>
    <flexbox orient="vertical" style="width: 95%;margin: 50px auto 0;">
      <flexbox-item><div class="flex-demo">
        <div class="title"><span class="time">{{order.create_time}}</span><span class="log-btn" @click="viewOrderRecord">查看订单操作记录</span></div>
        <div class="order-text">
          <h5>订单号：{{order.order_no}}</h5>
          <div class="order-state">
            <span style="margin-right: 1rem;"><i class="iconfont icon-dingdan"></i>{{order.order_status | statusFilter}}</span>
            <span><i class="iconfont icon-dingdandaifukuan"></i>{{order.order_pay_status==0?'未付款':'已付款'}}</span>
          </div>
          <p><i class="iconfont icon-dizhi1"></i>{{order.province}}{{order.city}}{{order.area}}{{order.detail_address}}</p>
          <p :style="{color:order.remark?'#333':'#ccc'}"><i class="iconfont icon-beizhu"></i>{{order.remark?order.remark:'（暂无备注信息）'}}</p>
          <div class="pay">
            <span class="price"><i class="iconfont icon-zhifufangshi"></i>￥<span>{{(order.order_total*1*1).toFixed(2)}}</span></span>
            <span class="btn">
              <span v-if="order.order_status==0||order.order_status==1" @click="del">取消交易</span>
            </span>
          </div>
        </div>
      </div></flexbox-item>
      <flexbox-item><div class="flex-demo goodsList" v-for="v in order.orderDetailList" >
        <div class="goodsItem">
          <div class="imgBox"><img :src="config1.fileUrl+v.goodsImgList[0].img_url+'?x-oss-process=image/resize,w_40,h_40'" alt=""></div>
          <form-preview :header-label="v.goods_name" header-value="" :body-items="v.goodsList"></form-preview>
        </div>
      </div></flexbox-item>
      <flexbox-item><div class="flex-demo">
        <div style="padding:0.5rem;">
          <p>订单备注：</p>
          <div class="remark"><span>{{order.remark||'*'}}</span></div>
          <div style="text-align: right;">
            <span class="confirm" v-if="order.order_status==2" @click="confirmGetDoods">确认收货</span>
          </div>
          <div style="text-align: right;" v-show="returnShow">
            <span style="font-size: 1rem;">退货备注：<input class="returnRemark" type="text" v-model="returnRemark"></span>
            <span class="layui-btn" @click="submitReturn">确认发起退货申请</span>
          </div>
        </div>
      </div></flexbox-item>
    </flexbox>
    <!--<div class="layui-col-md12"><button class="layui-btn layui-btn-primary" @click="addOpen('0')"><i class="layui-icon">&#xe654;</i>添加收货地址</button></div>-->
    <div v-transfer-dom>
      <popup v-model="isRecord" height="100%"  style="background: #fbf9fe;">
        <vRecord v-if="isRecord" v-bind:uid="uid" @transferUser="recordBack"></vRecord>
      </popup>
    </div>
  </div>
</template>

<script>
  import vRecord from "./Order-record"
  import { XHeader, Flexbox, FlexboxItem,Popup } from 'vux'
  export default {
    name: "Order-detail",
    components: {
      XHeader, Flexbox, FlexboxItem, Popup, vRecord
    },
    data(){
      return {
        orderId: '',

        order: {},
        addList: [],

        returnShow: false, // 是否退货
        returnRemark: '', // 退货备注

        isRecord:false,   //显示订单操作记录
      }
    },
    filters: {
      statusFilter(value){
        let str = '';
        if(value==='0'){
          str = '待确认';
        }
        if(value==='1'){
          str = '待发货';
        }
        if(value==='2'){
          str = '已发货';
        }
        if(value==='3'){
          str = '已签收';
        }
        if(value==='4'){
          str = '退货中';
        }
        if(value==='5'){
          str = '已退货';
        }
        if(value==='6'){
          str = '取消交易中';
        }
        if(value==='7'){
          str = '已取消';
        }
        if(value==='8'){
          str = '退货待确认';
        }
        return str;
      },
    },
    methods:{
      back(){
        this.$router.push('/project1/view3/address');
      },
      // 订单操作记录返回操作
      recordBack(){
        this.isRecord = false
      },
      // 信息提示
      msg(str){
        this.$vux.toast.show({
          type: 'text',
          text: str,
          position: 'default',
          time: 800,
        });
      },
      // 获取订单详情
      getOrderDetail(){
        this.$vux.loading.show();
        this.config1.get('/purchasers/app/order/findDetailByOrderId', {
          orderId: this.orderId,
        }).then(res=>{
          this.$vux.loading.hide();
          if(res.data.code==='0'){
            this.order = res.data.order;
            this.order.orderDetailList.forEach(it=>{
              it.norm = JSON.parse(it.norm);
              it.maxNum = it.num;
              it.goodsList = [{
                label: '规格',
                value: it.norm.norm,
              },{
                label: '数量',
                value: it.num,
              },{
                label: '单位',
                value: it.norm.unit,
              },{
                label: '单价',
                value: '￥'+it.price.toFixed(2),
              },{
                label: '小计',
                value: '￥'+it.total.toFixed(2),
              },{
                label: '备注',
                value: it.remark,
              }];
            })
            // this.order = res.data.order.orderDetailList;
          }else{
            this.msg(this.config1.handleError(res.data));
          }
        })
      },
      // 确认收货（采购商签收）
      confirmGetDoods(){
        let self = this;
        this.$vux.confirm.show({
          title: '签收',
          content: '确认购买商品已收到？',
          onConfirm () {
            self.$vux.loading.show();
            self.config1.get('/purchasers/app/order/signfor', {
              orderId: self.order.id,
            }).then(res=>{
              self.$vux.loading.hide();
              if(res.data.code==='0'){
                self.msg(res.data.message);
                self.getOrderDetail();
              }else{
                self.msg(this.config1.handleError(res.data));
              }
            })
          }
        });
      },
      // 取消订单
      del(){
        let self = this;
        this.$vux.confirm.show({
          title: '取消理由',
          content: '<textarea class="weui-textarea cancelReason" cols="30" rows="5" placeholder="输入取消理由"></textarea>',
          onShow () {
            $('.cancelReason').val('');
          },
          onHide () {
          },
          onCancel () {
          },
          onConfirm () {

            let el = $('.cancelReason');
            if(el.val()=='') {
              self.msg('请输入取消理由！');
              return;
            }
            if(!el.val().trim()) {el.focus();return;}
            console.log($.trim(el.val()))
            self.$vux.loading.show();
            self.config1.get('/purchasers/app/order/cancelOrder', {
              orderId: self.order.id,
              remark: $.trim(el.val()),
            }).then(res=>{
              self.$vux.loading.hide();
              if(res.data.code==='0'){
                if(v.order_status==0){
                  self.msg(res.data.message);
                  this.getOrderDetail()
                }else{
                  self.msg('已成功提交取消交易申请！');
                }
                self.getOrderList(1);
              }else{
                self.msg(self.config1.handleError(res.data));
              }
            })
          }
        });
      },
      // 发起退货
      goodsReturn(){
        this.returnShow = true;
      },
      // 取消退货
      goodsReturnCancel(){
        this.returnShow = false;
        this.getOrderDetail();
      },
      // 判断数量
      jugeNum(v){
        if(v.num>v.maxNum){
          this.msg('退货数量不能超过原订单商品数量');
          v.num = v.maxNum;
        }
      },
      // 退货
      submitReturn(){
        if(!this.returnRemark) {
          this.msg('请输入退货备注');
          $('.returnRemark').focus();
          return;
        }
        let arr = [];
        this.order.orderDetailList.forEach(it=>{
          arr.push({
            detail_id: it.id,
            goods_id: it.goods_id,
            goods_name: it.goods_name,
            norm: it.norm,
            num: it.num,
          })
        });
        this.$vux.loading.show();
        this.config1.get('/purchasers/app/order/returnOfGoods', {
          orderId: this.order.id,
          remark: this.returnRemark,
          returnJson: JSON.stringify(arr),
        }).then(res=>{
          this.$vux.loading.hide();
          if(res.data.code==='0'){
            this.msg(res.data.message);
          }else{
            this.msg(this.config1.handleError(res.data));
          }
        })
      },
      // 查看订单操作记录
      viewOrderRecord(){
        this.uid = this.order.id
        this.isRecord = true
        // this.$router.push({path: '/home/view4/user/order-record', query:{id: this.order.id}});
      },
      back(){
        this.$router.push('/project1/view3/order');
      },
    },
    mounted(){
      this.orderId = this.$route.query['orderid'];
      this.getOrderDetail();
    }
  }
</script>

<style scoped lang="less">
  @import "../../../assets/css/font_975465_4qn59qnejbp/iconfont.css";
  .weui-form-preview__hd{
    display: none!important;
  }
  .goodsList{
    .goodsItem{
      position: relative;
      margin: 1rem 0;
      .imgBox{
        max-height: 50px;
        overflow: hidden;
        position: absolute;
        top: 0.5rem;
        right: 0.5rem;
        z-index: 2;
      }
    }
  }
  .flex-demo{
    background: #fff;
    border-radius: 5px;
    box-shadow: 0 0 8px #bbbbbd;
    margin-top: 0.3rem;
    font-size:0.8rem;
    .title{
      display: flex;
      justify-content: space-between;
      padding:0.5rem 0.5rem;
      line-height:1.5rem;
      border-bottom:1px #33bb99 solid;
      span{
        display: inline-block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow:ellipsis;
        .iconfont{
          color:#33bb99;
          font-weight: normal;
          font-size:1rem;
          padding-right:0.3rem;
        }
      }
      span.time{
        color: #999;
        font-size: 0.6rem;
        font-weight:normal;
      }
      span.log-btn{
        background: #33bb99;
        color: #fff;
        padding:0 0.5rem;
        border-radius: 5px;
      }
    }
    .order-text{
      padding:0.5rem;
      line-height:1.5rem;
      font-size:0.8rem;
      color:#333;
      h5{
        font-size:0.9rem;
      }
      .order-state{
        color:#ff0000;
        i{
          color:#33bb99;
          padding-right:0.2rem;
          font-size:1rem;
        }
      }
      p{
        white-space: nowrap;
        overflow: hidden;
        text-overflow:ellipsis;
        .iconfont{
          color:#33bb99;
          padding-right:0.2rem;
          font-size:1rem;
        }
      }
      .pay{
        display: flex;
        justify-content: space-between;
        .price{
          font-weight: 700;
          color:#ff0000;
          .iconfont{
            color:#33bb99;
            padding-right:0.2rem;
            font-size:1rem;
            font-weight: normal;
          }
          span{
            font-size:1.2rem;
          }
        }
        .btn{
          color: #fff;
          span{
            margin-left: 0.5rem;
            background: #ffc655;
            display: inline-block;
            line-height:1.5rem;
            padding:0 0.5rem;
            border-radius: 5px;
          }
        }
      }
    }
  }
  .confirm{
    background: #33bb99;
    color: #fff;
    padding:0 0.5rem;
    border-radius: 5px;
    line-height:1.5rem;
    display: inline-block;
  }
  .remark{
    width:100%;
    margin:0.7rem 0 1.3rem;
    border:1px #e1e1e1 solid;
    border-radius: 5px;
    span{
      padding:0.5rem;
      display: inline-block;
      min-height:20px;
      line-height:1.5rem;
    }
  }
</style>
